.book-post {
  a:hover {
    text-decoration: underline;
  }

  > *:first-child {
    margin-top: 0 !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
    margin-bottom: $line-margin;
    margin-top: $line-margin * 1.7;
  }

  h1,
  h2 {
    padding-bottom: 0.4rem;
    border-bottom: 1px solid $border-color
  }

  h1 {
    font-size: $font-size-largest;
  }

  h2 {
    font-size: $font-size-large;

  }

  h3 {
    font-size: $font-size-medium;
  }

  h4 {
    font-size: $font-size-small;
  }

  h5 {
    font-size: $font-size-smaller;
  }

  h6 {
    font-size: $font-size-smallest;
    color: grey;
  }

  p {
    margin-bottom: $line-margin;
  }

  hr {
    border: 1px solid $border-color;
    background-color: $border-color;
    margin: $line-margin 0;
  }

  .table-wrapper {
    max-width: 100%;
    margin: 1.25rem 0;
    overflow: auto;

    table {
      width: 100%;
      border-spacing: 0px;
      border-collapse: collapse;

      th,
      td {
        padding: 0.7rem;
        border: 1px solid $border-color;
        text-align: left;
      }
    }
  }

  ul,
  ol {
    list-style-position: outside;
    margin: 0 0 $line-margin 1.4rem;

    ol {
      margin-top: 0;
      margin-bottom: 0;
    }

    ul {
      margin-top: 0;
      margin-bottom: 0;
    }

    p {
      margin: 0;
    }
  }

  blockquote {
    margin: 1.125rem 0 1.125rem 0;
    padding: 0.2rem 1rem;

    p {
      margin-bottom: 0.5rem;
    }

    p:last-child {
      margin-bottom: 0;
    }

    ul:last-child {
      margin-bottom: 0;
    }

    &.right {
      border-left: none;
      border-right: .1rem solid #dadee4;
    }
  }

  @mixin md-container($border-color, $background-color) {
    margin: 1.125rem 1.125rem 1.125rem 0;
    padding: 0.2rem 1rem;
    background-color: $background-color;
    border-left: .1rem solid $border-color;

    p {
      margin-bottom: 0.5rem;
    }

    p:last-child {
      margin-bottom: 0;
    }

    ul:last-child {
      margin-bottom: 0;
    }
  }

  .note {
    @include md-container(#6ab0de, #e7f2fa)
  }

  .tip {
    @include md-container(#1abc9c, #dbfaf4)
  }

  .attention {
    @include md-container(#f0b37e, #ffedcc)
  }

  .video-container {
    position: relative;
    margin-bottom: 1.5rem;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;

    iframe {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }

  figcaption {
    text-align: center;
    font-size: $font-size-smaller;
    margin: 0.5rem 0;
  }

  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  iframe {
    width: 100%;
  }

  .checkbox-item {
    list-style-type: none;

    input {
      margin-left: -1rem;
      margin-right: 0.4rem;
    }
  }
}
